<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>垂直方向对齐属性[文本与图片对齐]</title>
		<!--
		对齐分四种:基线对齐,顶部对齐
					居中对齐,底部对齐
		元素种类:块元素,行元素,行内块元素
		块元素特点:独占一行,设置宽高
		行元素特点:一行内显示,不可设置宽高
		网页:元素与嵌套元素生成
		行元素与块元素可以任意嵌套
		前提:设置宽高---行套块
					---块套块√
					---块套行√
		前提:一行内显示--行套块√
					  --块套块×
					  --块套行
					  --行套行√
		-->
		<style>
			p img:nth-child(1){
				/*veritical-aligin:baseline 默认基线对齐*/
				vertical-aligin:baseine;
				
			}
			/*问题:派生选择器,特点:找后代 p img*/
			p img:nth-child(1){
				/*veritical-aligin:baseline 顶部对齐*/
				vertical-aligin:top;
				width:500px;
				height:500px;
				background:red;
				}
					
				img.baseline{
					vertical-aligin:top;
				}
				vertical-aligin:bottom;
				
		</style>
	</head>
	<body>
		<!--需求结构:4个p,嵌套文字:图片叫什么名字
						文字后加ing,设定宽高:25~100px
						每个图片后面加:基线对齐,顶部对齐
						居中对齐,底部对齐
		-->
		<h1>文本与图片垂直属性</h1>
		<p>吒儿1<img class ="baseline" src ="img/吒儿.png"alt="吒儿1"width="100px",height="100px">基线对齐</p>
		<p>吒儿2<img class ="top" src ="img/吒儿2.png"alt="吒儿2"width="100px",height="100px">顶部对齐</p>
		<p>吒儿3<img class ="middle" src ="img/吒儿3.png"alt="吒儿3"width="100px",height="100px">居中对齐</p>
		<p>吒儿1<imgclass ="bottom" src ="img/敖丙.png"alt="敖丙"width="100px",height="100px">底部对齐</p>
		<!--css选择器--抓第一张图片...
		思路:派生选择器:找后代+伪类选择器:添加效果
		
		
	</body>
</html>
